<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>

<script>
const middot = String.fromCharCode(183); // &middot;
const isMac = navigator.platform.indexOf('Mac') !== -1;
test(() => assert_selection(
    [
      '<style>ul li:first-letter {color: red;}</style>',
        '<ul>',
          `<li>${middot} <a href="foo.html">|Appetizers</a></li>`,
          `<li>${middot} <a href="foo.html">Soups & Salads</a></li>`,
          `<li>${middot} <a href="foo.html">Sandwiches & Burgers</a></li>`,
          `<li>${middot} <a href="foo.html">Steak & Ribs</a></li>`,
          `<li>${middot} <a href="foo.html">Seafood</a></li>`,
          `<li>${middot} <a href="foo.html">Combos</a></li>`,
        '</ul>'
    ].join(''),
    selection => {
      for (let i = 0; i < 14; ++i)
        selection.modify('extend', 'forward', 'word');
    },
    [
      '<style>ul li:first-letter {color: red;}</style>',
        '<ul>',
          `<li>${middot} <a href="foo.html">^Appetizers</a></li>`,
          `<li>${middot} <a href="foo.html">Soups & Salads</a></li>`,
          `<li>${middot} <a href="foo.html">Sandwiches & Burgers</a></li>`,
          isMac ? `<li>${middot} <a href="foo.html">Steak| & Ribs</a></li>`
                : `<li>${middot} <a href="foo.html">Steak |& Ribs</a></li>`,
          `<li>${middot} <a href="foo.html">Seafood</a></li>`,
          `<li>${middot} <a href="foo.html">Combos</a></li>`,
        '</ul>'
    ].join('')), 'Extend by word in lines with :first-letter');
</script>
